<template>
  <div class="add-activity">
    <div class="main">
      <div class="list-herder">
        <el-page-header @back="goBack" :content="title"> </el-page-header>
      </div>
      <el-form
        ref="form"
        :model="Form"
        label-width="80px"
        label-position="top"
        inline
      >
        <el-form-item label="类型">
          <el-select
            v-model="Form.typeId"
            placeholder="请选择活动类型"
            @change="$forceUpdate()"
          >
            <el-option
              :label="item.title"
              :value="item.id"
              v-for="item in acType"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="Form.statusId"
            placeholder="请选择活动区域"
            @change="$forceUpdate()"
          >
            <el-option
              :label="item.title"
              :value="item.id"
              v-for="item in resType"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="Form.title"></el-input>
        </el-form-item>
        <el-form-item label="预算">
          <el-input v-model="Form.budget"></el-input>
        </el-form-item>
        <el-form-item label="目标">
          <el-input v-model="Form.target"></el-input>
        </el-form-item>
        <el-form-item label="结果">
          <el-input v-model="Form.result"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-col>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              v-model="Form.startTime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-col>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              v-model="Form.endTime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="rich-text">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 500px; overflow-y: hidden"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
          @onChange="onChange"
        />
      </div>
      <can_save @saveData="saveData" @cancelData="cancelData"></can_save>
    </div>
  </div>
</template>
<script>
import can_save from "../../components/components_wxq/can_save.vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import storage from "../../utils/storage";
import {
  setActivityStatus,
  setActivityType,
  addActivity,
  amendActivity,
} from "../../utils/api/marke";

export default {
  name: "addActivityPage",
  components: {
    can_save,
    Editor,
    Toolbar,
  },
  data() {
    return {
      Form: {
        adminId: 1,
        title: "",
        statusId: null,
        startTime: "",
        endTime: "",
        typeId: null,
        budget: "",
        target: "",
        result: "",
        content: "",
      },
      acType: [],
      resType: [],
      title: "",
      editor: null,
      html: "",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    cancelData() {
      this.$router.push("/home/market/activity");
    },
    saveData() {
      console.log(this.Form);
      if (this.Form.id) {
        amendActivity(this.Form).then((data) => {
          if (data.data.code == 200) {
            this.$router.go(-1);
            this.open1();
          }
        });
      } else {
        addActivity(this.Form).then((data) => {
          console.log(data);
          if (data.data.code == 200) {
            this.$router.go(-1);
            this.open2();
          }
        });
      }
    },
    open2() {
      this.$message({
        message: "成功添加",
        type: "success",
      });
    },
    open1() {
      this.$message({
        message: "修改成功",
        type: "success",
      });
    },
    //富文本事件
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      this.Form.content = editor.getText();
    },
    //刷新缓存
  },
  computed: {},
  watch: {},
  mounted() {
    setActivityStatus().then((data) => {
      this.resType = data.data.data;
      this.resType.forEach((item) => {
        if (item.title == this.Form.statusName) {
          this.Form.statusId = item.id;
          delete this.Form.statusName;
        }
      });
    });
    setActivityType().then((data) => {
      this.acType = data.data.data;
      this.acType.forEach((item) => {
        if (item.title == this.Form.typeName) {
          this.Form.typeId = item.id;
          delete this.Form.typeName;

          console.log(this.Form);
        }
      });
    });
  },
  created() {
    this.title = this.$route.params.objData.H;
    this.Form = this.$route.params.objData.data || this.Form;
    this.html = `<p>${this.Form.content}<p>`;
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style lang="less" scoped>
.add-activity {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;

  .main {
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
    border-top: 4px solid #4091ff;
    border-bottom: 2px solid #ccc;
    border-radius: 8px 8px 0 0;
  }
  .list-herder {
    padding: 0 20px 10px;
  }
  .el-form {
    width: 100%;
    padding: 20px 20px 10px;
    box-sizing: border-box;
    .el-form-item {
      width: 50%;
      margin-right: 0;
      padding: 0 12px;
      box-sizing: border-box;
      vertical-align: none;
    }
    .el-select {
      width: 100%;
    }
    .el-form-item /deep/ .el-input {
      width: 100% !important;
      height: 36px !important;
    }
  }
  .rich-text {
    padding: 20px;
    border-bottom: 1px solid #e5dfd3;
  }
}
</style>
